<template>
  <div>
    <van-nav-bar :left-arrow="leftArrow"
                 :fixed="fixed"
                 :z-index="zIndex"
                 @click-left="onClickLeft"
                 @click-right="onClickRight"
    >
      <van-icon slot="left" class="iconfont icon_back" color="#333333" size="18"><span class="main-title margin-left-10"></span></van-icon>
      <!--    <div  slot="title"><div class="main-title">{{title}}</div></div>-->
      <van-button slot="right" color="#09BB07" size="normal" class="send-button" :disabled="disabled" @click="writeCircle">发表</van-button>
    </van-nav-bar>
    <div class="margin-top-46">
      <div class="circleText">
        <van-field
          v-model="content"
          rows="4"
          type="textarea"
          placeholder="这一刻的想法.."
          @input="circleText()"
        />
      </div>
      <div class="uploader">
        <van-uploader
          v-model="fileList"
          multiple
          :max-count="9"
          :preview-size="100"
          :after-read="afterRead"
          @delete="deleteFile"
          :multiple=true
          :deletable=false
        />
      </div>
      <div class="setting">
        <van-cell-group>
          <van-cell icon="location-o" title="所在位置" :border="border" :center="center" :clickable="clickable"  to="/friendCircle" :is-link="isLink">

          </van-cell>
        </van-cell-group>
        <van-cell-group>
          <van-cell icon="friends-o" title="提醒谁看" :border="border" :center="center" :clickable="clickable"  to="/friendCircle" :is-link="isLink">

          </van-cell>
        </van-cell-group>
        <van-cell-group>
          <van-cell icon="manager-o" title="谁可以看" :border="border" :center="center" :clickable="clickable"  to="/friendCircle" :is-link="isLink">

          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>

</template>

<script>
  import Vue from 'vue';
  import axios from 'axios'
  import env from '@/assets/js/baseJS/env.js'
  import { NavBar,Button,Uploader ,Cell,CellGroup  } from 'vant';
  import friendCircleService from "./friendCircle-service.js"

  Vue.use(NavBar).use(Button).use(Uploader).use(Cell).use(CellGroup);
    export default {
        name: "circleText",
        data(){
          return{
            zIndex:5,
            //是否显示返回箭头
            leftArrow:false,
            // 是否固定顶部
            fixed:true,
            border:true,
            center:true,
            //是否开启点击反馈
            clickable:true,
            //开启箭头并开启点击反馈
            isLink:true,
            disabled:true,
            //发表内容
            content:"",
            fileList:[],
            //需要提交到后台
            saveFile:[],
          }
        },
      methods:{
        onClickLeft() {
          console.log('返回上一级');
          this.$router.back(-1)
        },
        onClickRight() {

        },
        afterRead(file){
          //上传文件
          var data = new FormData();
          if (file && file.length) { // 判断是否是多图上传 多图则循环添加进去
            file.forEach(item => {
              data.append("files", item.file)//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
            })
          } else {
            data.append("files", file.file)
          }
          // 创建axios实例
          if (localStorage.getItem('user')) { //判断token是否存在
            var user = JSON.parse(localStorage.getItem('user'));
            var token = user.token;
            var signKey = user.signKey;
            var req = axios.create({
              baseURL: env.ChatAPI.apiPath,
              headers: {
                'token':token,
                'sign':signKey,
              },
              timeout: 30000,
            })
            req.post('/file/uploadFiles', data, {}).then(result => {
              var res=result.data;
              console.log("上传返回参数====》",JSON.stringify(res));
              if(res.code==0){
                res.result.forEach(it=>{
                  this.saveFile.push(it.ossFileName)
                })
                console.log("this.saveFile====》",this.saveFile);
              }else{
                Toast("上传异常!")
              }
            })
          }else{
            Toast("登录失效!")
            this.$router.replace('/login')
          }

        },
        deleteFile(file){
          console.log("删除图片=====>:"+JSON.stringify(file.content));
        },
        writeCircle(){

          let data = {
            content:this.content,
            location:"合肥",
            files:this.saveFile
          };
          console.log("提交参数====》",JSON.stringify(data));
          friendCircleService.publishFriendCircle(data).then(result=>{
            let res = result.data;
            if(res.code == '0'){
              this.$router.push('/friendCircle')
            }
          }).catch(err => {

          }).finally(()=>{

          })
          console.log('发表说说');
        },
        //输入框内容变化
        circleText(){
          if(this.content.length>0){
            this.disabled=false;
          }else{
            this.disabled=true;
          }

        }
      }
    }
</script>

<style scoped>
  .send-button{
    height: 28px;
    width: 52px;
    line-height: 26px;
    padding: 0;
  }
  .uploader{
    margin: 15px 22px;
  }
  .setting{
    margin: 0px 22px;
  }
  .circleText{
    margin: 15px 0px;
  }
</style>
